<template>
	<view class="article-container app-view">
		<view class="main-content">
			<view class="log-block">
				<view class="share-user-info-wrap">
					<view class="shear-content-user-info">
						<view class="user-icon-container share-user-icon">
							<image :src="dataInfo.author_img" mode=""></image>
						</view>
						<view class="right">
							<text class="share-user-name">
								{{dataInfo.author_nickname}}
							</text>
							<view class="time-info">
								{{dataInfo.create_time}}
							</view>
						</view>
					</view>
					<view class="follow-author">
						<view class="focus-button-container">
							<view class="go-to-focuse">
								+ 关注
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content-content">
				{{dataInfo.button_name}}
			</view>
			<template v-if="dataInfo.play_url">
				<view class="mi-video-player user-upload-video">
					<videomuiPlayer :src='dataInfo.play_url' :poster='dataInfo.moment_cover_image'></videomuiPlayer>
				</view>
			</template>
			<view class="article-info">
				<view class="read-num"></view>
				<view class="praise">
					<image src="../../static/images/pre-praise.db.png" class="praise-icon" mode=""></image>
					<text class="praise-num">{{dataInfo.praise_num}}</text>
				</view>
			</view>
			<view class="comments-container">
				<view class="comments-title">
					评论
				</view>
				<view class="comment-block" v-for="(item,index) in comment_list.slice(0,3)" :key="index">
					<view class="user-icon-container user-icon">
						<image :src="item.img" mode=""></image>
					</view>
					<view class="comment-info">
						<view class="user-info">
							<view class="nickname">
								{{item.nickname}}
							</view>
							<view class="date">
								{{item.create_time}}
							</view>
						</view>
						<view class="comment-text">
							{{item.comment}}
						</view>
						<view class="span praise">
							<image src="../../static/images/pre-praise.db.png" mode=""></image>
							<text class="praise-num" v-if="item.praise_num!=0">{{item.praise_num}}</text>
						</view>
					</view>
				</view>
				<view class="log-block" @click="toCommentDetail">
					<view class="more-comment-tips">
						查看全部{{dataInfo.comment_num}}条评论 >
					</view>
				</view>
			</view>
			<view class="bottom-area maxW maxF">
				<view class="bottom-area-content">
					<view class="log-block write-comment-enter left-write-comment">
						<image src="../../static/images/write.png" mode=""></image>
						<view class="write-comment-text">
							写评论
						</view>
					</view>
					<view class="log-block">
						<view class="shop-button" @click="toProDetail(dataInfo.product_id)">
							￥{{dataInfo.price}}
							<text style="margin-left: .1rem;"> 立即购买</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>
<script>
	import videomuiPlayer from '../../components/videomuiPlayer/videomuiPlayer.vue'
	export default {
		data() {
			return {
				dataInfo: {},
				id: '',
				comment_list: []
			};
		},
		components: {
			videomuiPlayer
		},
		methods: {
			toProDetail(id) {
				uni.navigateTo({
					url: `/subPage/proddetail/proddetail?id=${id}`,
				})
			},
			toCommentDetail() {
				uni.navigateTo({
					url: `/secPage/micircleComment/micircleComment?id=${this.id}`,
				})
			},
			getMomentByIdList() {
				this.$request.get('/getMomentByIdList', {
					moment_id_list: this.id,
				}).then((res) => {
					this.dataInfo = res.data.data.moment_list[0]
				}).catch(e => {
					console.log('错误了:', e)
				})
			},
			getMizoneOtherCommentList() {
				this.$request.get('/getMizoneOtherCommentList', {
					'moment_id': this.id,
					'page_index': 1,
					comment_type:'moment',
				}).then((res) => {
					this.comment_list = res.data.data.comment_list
				}).catch(e => {
					console.log('错误了:', e)
				})
			}
		},
		onLoad(e) {
			this.id = e.id
			this.getMomentByIdList()
			this.getMizoneOtherCommentList()
		}
	}
</script>

<style lang="scss" scoped>
	view {
		line-height: 1.15;
	}

	.mi-video-player {
		margin: 0.21rem auto;
		border-radius: 0.1rem;
		overflow: hidden;
		position: relative;
		width: 100%;
		background: #000;
		z-index: 0;
		height: 100%;
	}

	.praise-num {
		line-height: .32rem;
		font-size: .24rem;
		color: rgba(0, 0, 0, .54);
	}

	.article-container {
		background: #fff;
		color: #3c3c3c;

		.main-content {
			padding: 0 0.24rem;
			overflow: hidden;
			padding-bottom: 0.96rem;
			.log-block {
				.share-user-info-wrap {
					margin: auto;
					text-align: left;
					margin-top: 0.32rem;
					white-space: nowrap;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.shear-content-user-info {
						display: flex;
						justify-content: flex-start;
						overflow: hidden;
						text-overflow: ellipsis;

						.user-icon-container {
							width: 0.733rem;
							height: 0.733rem;
							margin-right: 0.18rem;
							vertical-align: middle;
							border-radius: 3rem;

							image {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}

						.right {
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.share-user-name {
								display: inline-block;
								font-size: .28rem;
								color: #000;
								vertical-align: middle;
							}

							.time-info {
								font-size: .22rem;
							}
						}

					}

					.follow-author {
						.focus-button-container {
							.go-to-focuse {
								background: #ff6700;
								border: 0.01rem solid #ff6700;
								color: #fff;
								width: 1.27rem;
								font-size: .22rem;
								height: 0.47rem;
								line-height: .47rem;
								border-radius: 6rem;
								text-align: center;
								display: block;
							}
						}
					}
				}
			}

			.content-content {
				line-height: 0.56rem;
				margin: 0.28rem 0 0;
				width: 100%;
				font-size: .28rem;
				line-height: .38rem;
				font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
				box-sizing: border-box;
				text-align: justify;
				word-break: break-all;
				color: #000;
			}

			.article-info {
				width: 100%;
				height: 0.32rem;
				margin: auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: nowrap;
				margin-bottom: 0.4rem;
				line-height: .32rem;
				font-size: .24rem;
				color: rgba(0, 0, 0, .54);

				.read-num {}

				.praise {
					image {
						height: 0.24rem;
						width: 0.24rem;
						vertical-align: baseline;
						margin-right: 0.08rem;
					}

					.praise-num {
						line-height: .32rem;
						font-size: .24rem;
						color: rgba(0, 0, 0, .54);
					}
				}
			}

			.comments-container {
				position: relative;
				width: 100%;
				border-top: 0.5px solid rgba(0, 0, 0, .15);
				padding: 0.32rem 0;

				.comments-title {
					text-align: left;
					width: 100%;
					height: 0.48rem;
					font-size: .32rem;
					font-weight: 700;
					color: rgba(0, 0, 0, .87);
					line-height: .48rem;
					margin-bottom: 0.32rem;
				}

				.comment-block {
					position: relative;
					width: 100%;
					text-align: left;
					min-height: 0.74rem;

					&:not(:last-child) {
						margin-bottom: 0.48rem;
					}

					.user-icon {
						position: absolute;
						top: 0;
						left: 0;
						border-radius: 1rem;
					}

					.user-icon-container {
						width: 0.733rem;
						height: 0.733rem;

						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}

					.comment-info {
						position: relative;
						margin-left: 0.9067rem;
						padding: 0 0 0.32rem 0.0667rem;
						border-bottom: 0.5px solid rgba(0, 0, 0, .15);

						.user-info {
							margin-bottom: 0.24rem;
							position: relative;

							.nickname {
								font-size: .28rem;
								color: rgba(0, 0, 0, .54);
								line-height: .38rem;
								margin-bottom: 0.04rem;
							}

							.date {
								font-size: .2rem;
								color: rgba(0, 0, 0, .54);
							}
						}

						.comment-text {
							color: #000;
							letter-spacing: .01rem;
							font-size: .28rem;
							line-height: .42rem;
							width: 100%;
						}

						.praise {
							position: absolute;
							right: 0;
							top: 0.2rem;

							.praise-num {
								line-height: .32rem;
								font-size: .24rem;
								color: rgba(0, 0, 0, .54);
							}

							image {
								height: 0.24rem;
								width: 0.24rem;
								vertical-align: baseline;
								margin-right: 0.08rem;
							}
						}
					}
				}

				.log-block {
					.more-comment-tips {
						height: 0.32rem;
						font-size: .24rem;
						font-family: MI-LANTING_GB-OUTSIDE;
						font-weight: 400;
						color: rgba(0, 0, 0, .4);
						line-height: .32rem;
						text-align: center;
					}
				}
			}

			.bottom-area {
				position: fixed;
				width: 100%;
				height: 0.96rem;
				box-sizing: border-box;
				border-top: 0.5px solid rgba(0, 0, 0, .15);
				bottom: 0;
				left: 0;
				background-color: #fff;

				.bottom-area-content {
					width: 7.2rem;
					height: 100%;
					margin: auto;
					display: flex;
					justify-content: center;
					align-items: center;

					.write-comment-enter {
						text-align: center;
						flex: 1;
						margin-left: 0.433rem;

						image {
							width: 0.48rem;
							height: 0.48rem;
						}

						.write-comment-text {}
					}

					.log-block {
						.shop-button {
							width: 5.42rem;
							border-radius: 1rem;
							margin-right: 0.32rem;
							height: 0.8rem;
							line-height: .8rem;
							text-align: center;
							background-color: #ff6700;
							display: inline-block;
							color: #fff;
							font-size: .32rem;
							outline: none;
							border: none;
						}

						text {
							line-height: .8rem;
							color: #fff;
							font-size: .32rem;
						}
					}
				}
			}
		}
	}
</style>